<template>
  <!-- 仓储服务费 -->
  <el-dialog
    v-if="details"
    v-model="dialogVisible"
    title="仓储服务费"
    width="40%"
    :before-close="handleClose"
  >
    <el-form :model="{}" label-width="auto">
      <el-row :gutter="24" v-if="details.sellerBillExtend">
        <el-col :span="12">
          <el-form-item label="国内仓储费：">
            <span> {{ filters.thousands(details.sellerBillExtend.amount) }}元</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流水号">
            <span>{{ details.sellerBillExtend.innerId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式">
            <span>{{
              getStatusLabel(paymentMethodType, details.sellerBillExtend.payMode) || "未支付"
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="pl-0" v-if="details.storeBillVO">
          <el-row
            :gutter="24"
            v-for="(item, index) in [details.storeBillVO]"
            :key="index"
          >
            <el-col :span="12">
              <el-form-item label="仓库名称">
                <span>{{ item.storeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库费">
                <span>{{ filters.thousands(item.feeIn) }}元/天</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库费">
                <span>{{ filters.thousands(item.feeOut) }}元/天</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="仓储费">
                <span>{{ filters.thousands(item.charge) }}元/天</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
       <el-col :span="24">
          <c-table-template :data="[details.sellerBillExtend]" border>
            <el-table-column label="车辆信息" align="center">
              <template #default>
                <span v-for="(item, index) in k" :key="index">
                  {{ details.sellerBillExtend[item] }}&nbsp;
                </span>
              </template> 
            </el-table-column>
            <el-table-column label="车架号" align="center">
              <template #default>
                {{ details.sellerBillExtend.vin }}
              </template>
            </el-table-column>
          </c-table-template>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup>
const k = ["brand", "series", "model"];
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { paymentMethodType, getStatusLabel } from "@/utils/status.js";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const loading = ref(false);
const details = ref({});
const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    details.value = item;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>

